<template>
  <el-container class="app_container flex">
    <!-- <Aside @handleNodeClick="handleNodeClick" /> -->
    <video-tree @treeClick="treeClick"></video-tree>
    <el-main class="app_main flex">
      <Breadcrumb :title="pageTitle" />
      <div class="app_content">
        <el-radio-group class="layout-btn-box marginb-15" size="small" v-for="item in videoLayoutBtnGroup" v-model="currentLayout" :key="item.index" @change="videoGroupClick(item.index)">
          <el-radio-button class="layount-button flex-acenter" :label="item.name">
            <i class="iconfontShuzhi" :class="'icon-' + item.icon"></i>
            {{ item.name }}
          </el-radio-button>
        </el-radio-group>
        <div class="video-container">
          <VideoBox v-if="hasVideo" ref="videBox" :videoList="videoList" />
          <div class="empty-box flex-bcenter both-100" v-if="!hasVideo">
            <Empty description="暂无视频" />
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Aside from '@/components/Aside'
import request from "@/utils/request"
import VideoTree from './components/VideoTreeList'
import VideoBox from './components/VideoBox'
import Empty from '@/components/Empty'

export default {
  data () {
    return {
      // 布局方式
      videoLayoutBtnGroup: [
        {
          index: '1',
          name: '2*2',
          icon: 'shipin2x2'
        },
        {
          index: '2',
          name: '3*3',
          icon: 'shipin3x3'
        },
        {
          index: '3',
          name: '4*4',
          icon: 'shipin4x4'
        }
      ],
      // 当前布局
      currentLayout: '2*2',
      // 视频列表
      videoList: [],
    };
  },
  computed: {
    hasVideo () {
      return this.videoList && this.videoList.length > 0
    },
    pageTitle () {
      return '武平市烟草局'
    },
  },
  watch: {},
  methods: {
    // 树形菜单点击
    handleNodeClick (item) {
      // this.searchMap.deptId = item.id
      this.getList()
    },
    directionControl (num) {
      const params = {
        token: '',
        direction: num
      }
      request.get('axiosUrl', { params }).then(res => {
        console.log(res)
      })
    },
    treeClick (tree) {
      // this.currentLayout = '2*2'
      this.videoList = tree
      // this.$nextTick(() => {
      //   this.$refs.videBox.setGrid('box2-2')
      // })
    },
    videoGroupClick (index) {
      let grid = ''
      switch (index) {
        case '1':
          grid = 'box2-2'
          break
        case '2':
          grid = 'box3-3'
          break
        case '3':
          grid = 'box4-4'
          break
      }
      this.$refs.videBox.setGrid(grid)

    }
  },
  mounted () {

  },
  components: {
    Aside,
    VideoTree,
    VideoBox,
    Empty
  },
}
</script>

<style lang='less' scoped>
.app_content {
  .layout-btn-box {
    .layount-button {
      .layout-icon {
        width: 16px;
        height: 16px;
      }
    }
  }
  .video-container {
    height: calc(100% - 16px - 30px);
    overflow: auto;
  }
  video::-webkit-media-progress {
    display: none;
  }
}
</style>